<!-- 封装VanFieldCheckbox多选组件 -->
<template>
  <div>
    <div class="list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="~无更多信息~"
            @load="onLoad"
        >
          <van-checkbox-group
              v-model="checkboxList"
              ref="checkboxGroup"
              direction="horizontal"
          >
            <div v-if="checkedShow">
              <van-checkbox
                  v-for="(item, index) in dataSource"
                  :key="index"
                  class="wrap"
                  :name="item"
                  shape="square"
                  :disabled="canNotCheck(item)"
                  :label-disabled="true"
              >
                <div>
                  <slot name="head" :item="item" :index="index">
                    <div class="top">
                      <div class="title titleWidth">
                        <span
                            v-for="(keyname, index) in columns.titleKey"
                            :key="index"
                        >
                          {{ checkValue(item[keyname]) }}
                          <span v-show="index < columns.titleKey.length - 1">
                            |
                          </span>
                        </span>
                      </div>

                      <div
                          class="spot"
                          v-if="columns.operation"
                          @click.stop="operationShow(item)"
                      >
                        <img src="../../assets/diandian.png" alt=""/>
                      </div>
                    </div>
                  </slot>
                  <slot name="body" :item="item" :index="index">
                    <div class="center">
                      <div>
                        <p
                            v-for="(items, indexs) in columns.content
                            ? columns.content.slice(0, minLen)
                            : []"
                            :key="indexs"
                        >
                          <span class="key" v-if="items.type != 'input'"
                          >{{ items.name }}：</span
                          >
                          <span class="value" v-if="items.type != 'input'">
                            <span v-for="(e, v) in items.key" :key="v">{{
                                checkValue(item[e])
                              }}</span>
                          </span>

                          <span class="key numKey" v-if="items.type == 'input'">{{ items.name }}：</span>
                          <span class="value numValue" :style="items.style"
                                v-if="items.type == 'input' && items.key.length < 2">
                            <van-field
                                class="key numInput"
                                v-for="(e, v) in items.key"
                                v-model="item[e]"
                                :key="v"
                                placeholder="请输入"
                                :formatter="formatter"
                                input-align="right"
                            />
                            <span class="numUnit">{{ item[items.unit] }}</span>
                          </span>
                        </p>
                      </div>
                      <div class="showAll showAll2">
                        <p
                            v-for="(items, indexs) in columns.content
                            ? columns.content.slice(
                                minLen,
                                columns.content.length
                              )
                            : []"
                            :key="indexs"
                        >
                          <span class="key"
                          >{{ items.name }}：</span
                          >
                          <span class="value">
                            <span v-for="(e, v) in items.key" :key="v">{{
                                checkValue(item[e])
                              }}</span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </slot>
                  <slot name="label" :item="item" :index="index">
                    <div class="label" v-if="columns.labelKey">
                      <!-- labelText: {key: "text"}  key对应labelKey内元素 -->
                      <span v-for="(i, j) in columns.labelKey" :key="j">{{
                          `${
                              columns.labelText ? columns.labelText[i] : ""
                          }${checkValue(item[i])}`
                        }}</span>
                    </div>
                    <div class="label" v-if="columns.statusKey">
                      <span class="successs" v-for="(i, j) in columns.statusKey" :key="j">
                        {{ item[i] || '启用' }}
                      </span>
                    </div>
                    <div class="formItemFlex" v-show="remove">
                      <p class="required FormTit"><span></span>数量</p>
                      <div class="haveUnitBox">
                        <van-field
                            v-model="item.goodsNum"
                            type="number"
                            placeholder="请输入"
                            input-align="right"
                            :formatter="(e) => needInNumChange(e, item)"
                        />
                        <div
                            style="line-height: 23px; margin-left: 10px;font-size: 14px;"
                        >
                          {{ item.unitName }}
                        </div>
                      </div>
                    </div>
                  </slot>
                  <slot name="foot" :item="item" :index="index">
                    <div
                        class="foot"
                        v-if="
                        columns.peopleKey ||
                          columns.flowStatusNameKey ||
                          columns.operationText
                      "
                    >
                      <div style="display: flex">
                        <span class="pictures" v-if="columns.peopleKey">{{
                            item[columns.peopleKey]
                                ? item[columns.peopleKey].slice(-2)
                                : ""
                          }}</span>
                        <span class="text" v-if="columns.peopleKey"
                        >由{{ item[columns.peopleKey] }}提交</span
                        >
                      </div>
                      <div
                          class="opera"
                          v-if="columns.operationText"
                          @click.stop="operationIt(item, columns.operationText)"
                      >
                        {{ columns.operationText }}
                      </div>
                      <div
                          class="opera"
                          v-if="columns.flowStatusNameKey"
                          :style="{
                          color:
                            item.flowStatus == 'RUNNING'
                              ? '#1890FF'
                              : item.flowStatus == 'TERMINATED'
                              ? '#FF943E'
                              : item.flowStatus == 'AGREE'
                              ? '#00B042'
                              : item.flowStatus == 'REFUSE'
                              ? '#FF4D4F'
                              : '#1890ff',
                        }"
                      >
                        {{ item[columns.flowStatusNameKey] }}
                      </div>
                    </div>
                  </slot>
                </div>
              </van-checkbox>
            </div>
            <div v-else>
              <div
                  v-for="(item, index) in dataSource"
                  :key="index"
                  @click="handleItem(item)"
                  class="wrap"
              >
                <div>
                  <slot name="head" :item="item" :index="index">
                    <div class="top">
                      <div class="icon"></div>
                      <div class="title titleWidth">
                        <span
                            v-for="(keyname, index) in columns.titleKey"
                            :key="index"
                        >
                          {{ checkValue(item[keyname]) }}
                          <span v-show="index < columns.titleKey.length - 1">
                            |
                          </span>
                        </span>
                      </div>

                      <div class="title" v-if="columns.subtitleKey">
                        {{ checkValue(item[columns.titleKey]) }}|{{
                          checkValue(item[columns.subtitleKey])
                        }}
                      </div>
                      <div
                          class="spot"
                          v-if="columns.operation"
                          @click.stop="operationShow(item)"
                      >
                        <img src="../../assets/diandian.png" alt=""/>
                      </div>
                    </div>
                  </slot>
                  <slot name="body" :item="item" :index="index">
                    <div class="center">
                      <div>
                        <p
                            v-for="(items, indexs) in columns.content
                            ? columns.content.slice(0, minLen)
                            : []"
                            :key="indexs"
                        >
                          <span class="key"
                          >{{ items.name }}：</span
                          >
                          <!--change by gongjiuhui start-->
                          <span
                              class="value"
                              :style="items.style"
                              v-if="
                              items.key.length < 2 && items.type != 'link'
                            "
                          >
                            <span v-for="(e, v) in items.key" :key="v">{{
                                checkValue(item[e])
                              }}</span>
                          </span>
                          <span
                              class="value"
                              :style="items.style"
                              v-if="
                              items.key.length < 2 && items.type == 'link'
                            "
                              @click="toDetail(item)"
                          >
                            <span v-for="(e, v) in items.key" :key="v">
                              {{ checkValue(item[e]) }}
                              <van-icon
                                  name="arrow"
                                  size="16px"
                                  color="#1890ff"
                                  style="top: 3px;"
                              />
                            </span>
                          </span>

                          <span
                              class="value"
                              :style="items.style"
                              v-if="
                              items.key.length > 1
                            "
                          >
                            <span v-for="(e, v) in items.key" :key="v"
                            >{{
                                checkValue(item[e])
                              }}<span v-if="v != items.key.length - 1">{{
                                  items.keySymbol
                                }}</span></span
                            >
                          </span>
                        </p>
                      </div>
                      <div v-if="item.contentShow" class="showAll">
                        <p
                            v-for="(items, indexs) in columns.content
                            ? columns.content.slice(
                                minLen,
                                columns.content.length
                              )
                            : []"
                            :key="indexs"
                        >

                          <span class="key"
                          >{{ items.name }}：</span
                          >
                          <span class="value">
                            <span v-for="(e, v) in items.key" :key="v">{{
                                checkValue(item[e])
                              }}</span>
                          </span>
                        </p>
                      </div>
                    </div>
                  </slot>
                  <slot name="label" :item="item" :index="index">
                    <div class="label" v-if="columns.labelKey">
                      <!-- labelText: {key: "text"}  key对应labelKey内元素 -->
                      <span v-for="(i, j) in columns.labelKey" :key="j">{{
                          `${
                              columns.labelText ? columns.labelText[i] : ""
                          }${checkValue(item[i])}`
                        }}</span>
                    </div>

                    <div class="label" v-if="columns.statusKey">
                      <span class="successs" v-for="(i, j) in columns.statusKey" :key="j">
                        {{ `${checkValue(item[i])}` }}
                      </span>
                    </div>
                  </slot>
                  <slot name="foot" :item="item" :index="index">
                    <div
                        class="foot"
                        v-if="
                        columns.peopleKey ||
                          columns.flowStatusNameKey ||
                          columns.operationText
                      "
                    >
                      <div style="display: flex">
                        <span class="pictures" v-if="columns.peopleKey">{{
                            item[columns.peopleKey]
                                ? item[columns.peopleKey].slice(-2)
                                : ""
                          }}</span>
                        <span class="text" v-if="columns.peopleKey"
                        >由{{ item[columns.peopleKey] }}提交</span
                        >
                      </div>
                      <div
                          class="opera"
                          v-if="columns.operationText"
                          @click.stop="operationIt(item, columns.operationText)"
                      >
                        {{ columns.operationText }}
                      </div>
                      <div
                          class="opera"
                          v-if="columns.flowStatusNameKey"
                          :style="{
                          color:
                            item.flowStatus == 'RUNNING'
                              ? '#1890FF'
                              : item.flowStatus == 'TERMINATED'
                              ? '#FF943E'
                              : item.flowStatus == 'AGREE'
                              ? '#00B042'
                              : item.flowStatus == 'REFUSE'
                              ? '#FF4D4F'
                              : '#1890ff',
                        }"
                      >
                        {{ item[columns.flowStatusNameKey] }}
                      </div>
                    </div>
                  </slot>
                </div>
              </div>
            </div>
          </van-checkbox-group>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div v-if="checkedShow" style="height: 0.5rem"></div> -->
    <div class="operation" v-if="checkedShow">
      <div>
        <img
            @click="changeItem(true)"
            v-if="checkboxList.length == 0"
            class="img1"
            src="../../assets/btna.png"
            alt=""
        />
        <img
            @click="changeItem(true)"
            v-if="
            checkboxList.length !== 0 &&
              checkboxList.length !== dataSource.length
          "
            class="img2"
            src="../../assets/btnb.png"
            alt=""
        />
        <!-- 勾选 -->
        <img
            @click="changeItem(false)"
            v-if="
            checkboxList.length !== 0 &&
              checkboxList.length === dataSource.length
          "
            class="img2"
            src="../../assets/btnc.png"
            alt=""
        />
        <span class="imgSpan">
          {{ checkedShowText }}
        </span>
        <span class="selectedSpan">
          {{ `(已选${checkboxList.length})` }}
        </span>
      </div>
      <div
          class="btncancel"
          v-if="cancelOperationTxt"
          @click="getListValue('cancel')"
      >
        {{ cancelOperationTxt }}
      </div>
      <div class="singel-info" @click="getListValue" v-if="singelInfo">
        {{ operationTxt }}
      </div>
      <div class="info" @click="getListValue" v-else>{{ operationTxt }}</div>
    </div>
    <van-action-sheet v-model="actionShow" title="请选择">
      <div
          class="actionWrap"
          v-for="(item, index) in columns.operation"
          :key="index"
      >
        <div class="left"><img :src="item.icon" alt=""/></div>
        <div class="right" @click="operationIt(itemData, item.name)">
          <p class="handle" :style="{ color: item.color || '#191F25' }">
            {{ item.name }}
          </p>
          <p class="explain">{{ item.remarks }}</p>
        </div>
      </div>
    </van-action-sheet>
    <BatchProductionModal ref="BatchProductionModal"></BatchProductionModal>
  </div>
</template>

<script>
import {getAction, postAction} from "@/api/manage";
import BatchProductionModal from "@/components/BatchProductionModal";

export default {
  name: "pageList",
  components: {BatchProductionModal},
  props: {
    columns: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isPage: {
      type: Boolean,
      default: true,
    }, //是分页
    singelInfo: {
      type: Boolean,
      default: false,
    }, //多选时底部只有确定样式按钮
    checkedShow: {
      type: Boolean,
      default: false,
    }, //是否开启选择
    checkedShowText: {
      type: String,
      default: "已选",
    }, //是否开启选择
    operationTxt: {
      type: String,
      default: "确定",
    },
    cancelOperationTxt: {
      type: String,
      default: "",
    },
    listUrl: {
      type: String,
      default: "",
    },
    minLen: {
      type: Number,
      default: 2,
    },
    pageSize: {
      type: Number,
      default: 30, //条数
    },
    usedGetMethods: {
      type: Boolean,
      default: true,
    },
    goodsRemoveData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    remove: {
      type: Boolean,
      default: false, //判断是不是移出库位物品列表
    },
    goodsRemoveLattice: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  data() {
    return {
      actionShow: false, //底部操作开关
      checkboxList: [], //列表选中的数据
      loading: false,
      finished: false,
      refreshing: false,
      pageNo: 1, //页码
      queryParam: {}, //查询条件
      dataSource: [], //列表数据
      total: "", //列表总条数
      itemData: {},
      selectedGoods: [],
      key: "serialId",
      idkeyAno: ""
    };
  },
  created() {
  },
  methods: {
    // 输入框 数据长度限制
    formatter(value) {
      if (!value) {
        return ''
      }
      value = value.toString()
      //先把非数字的都替换掉，除了数字和.
      value = value.replace(/[^\d.]/g, '')
      //保证只有出现一个.而没有多个.
      value = value.replace(/\.{2,}/g, '.')
      //必须保证第一个为数字而不是.
      value = value.replace(/^\./g, '')
      //保证.只出现一次，而不能出现两次以上
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      //只能输入四个小数
      value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3");
      //小数位处理
      if (value.substring(0, 1) == "0" && value.substring(0, 2) != "0.") {
        value = "0";
      }
      //输入长度控制
      if (value > 99999999999999.9999) {
        value = '';
      }
      return value
    },
    // 字段值为可跳转类型
    toDetail(item) {
      this.$emit("toOtherPage", item);
    },
    showBatch(id) {
      this.$refs.BatchProductionModal.getData(id);
    },
    // 判断是否为空
    checkValue(v) {
      if (v ?? "" !== "") {
        return v;
      } else {
        return v === 0 ? v : "-";
      }
    },
    // 动态禁用复选框
    canNotCheck(item) {
      if (this.columns.dynamicChecked) {
        return this.$parent.canNotCheck(item);
      }
    },
    // 更多操作
    operationShow(v) {
      // console.log(v, "更多操作");
      this.$emit("handleList", v.id, v, "更多操作");
      if (this.columns.operation.length > 0) {
        this.actionShow = true;
      } else {
        this.$toast("当前数据暂无操作");
      }
      this.itemData = v;
    },
    // 操作事件
    operationIt(a, b) {
      // console.log(a, b, "操作事件");
      this.actionShow = false;
      this.$emit("operationItem", a, b);
    },
    handleItem(v) {
      console.log(v.id, v, "点击项");
      this.$emit("handleList", v.id, v, "列表");
    },
    // 控制展开收起
    changeContentShow(a, b) {
      console.log(a, b);
      this.dataSource[a].contentShow = b;
      this.$forceUpdate();
    },
    // 全选点击事件
    getListValue(cancel) {
      let ids =
          this.checkboxList
              .map((e) => {
                return e.id;
              })
              .toString() || "";
      if (cancel) {
        this.$emit("getCheckedValue", ids, this.checkboxList, cancel);
      } else {
        this.$emit("getCheckedValue", ids, this.checkboxList);
      }
    },
    // 控制全选、清空
    changeItem(v) {
      if (this.columns.dynamicChecked) {
        // canCheckedNum: 未被禁用的复选框数量
        // 已选中数量等于可选复选框数量时就可以清空了
        if (this.checkboxList.length == this.columns.canCheckedNum) {
          this.$refs.checkboxGroup.toggleAll(false);
        } else {
          // 全部选中，并跳过禁用的复选框
          this.$refs.checkboxGroup.toggleAll({
            checked: true,
            skipDisabled: true,
          });
        }
      } else {
        // 默认操作
        this.$refs.checkboxGroup.toggleAll(v);
      }
    },
    // 获取列表数据
    onLoad(pageNo) {
      if (this.remove) {
        // 这里表示数据是通过扫码得到的，通过父组件传过来之后，在这里直接进行赋值，（移仓单新建，右上角的扫码）
        this.dataSource = this.goodsRemoveData;
        this.loading = false;
        this.finished = true;
        return;
      }
      if (!this.listUrl) {
        this.$toast("请设置url.list属性!");
        return;
      }
      if (pageNo === 1) {
        this.pageNo = 1;
        this.dataSource = [];
      }
      if (this.refreshing) {
        this.dataSource = [];
        this.refreshing = false;
      }
      let par = {
        ...this.queryParam,
        ...{pageNo: this.pageNo, pageSize: this.pageSize},
      };
      this.loading = true;
      let getDatafunction = this.usedGetMethods ? getAction : postAction;
      getDatafunction(this.listUrl, par)
          .then((res) => {
            if (res.code == 200) {
              if (res.result.pageList) {
                let dataList = res.result.pageList.records;
                this.dataSource = [...this.dataSource, ...dataList];
                this.dataSource = this.dataSource.map((e) => {
                  e.contentShow = false;
                  return e;
                });
                if (this.dataSource.length === res.result.pageList.total) {
                  this.finished = true;
                } else {
                  this.pageNo += 1;
                }
              } else {
                if (this.isPage == false) {
                  let dataList = res.result.records || res.result;
                  this.dataSource = [...this.dataSource, ...dataList];
                  this.finished = true;
                } else {
                  this.$emit("listTotal", res.result.total);
                  let dataList = res.result.records || res.result;
                  this.dataSource = [...this.dataSource, ...dataList];
                  this.dataSource = this.dataSource.map((e) => {
                    e.contentShow = false;
                    return e;
                  });
                  if (this.dataSource.length === res.result.total) {
                    this.finished = true;
                  } else {
                    if (!res.result.total) {
                      this.finished = true;
                      return;
                    }
                    this.pageNo += 1;
                  }
                }
                // 已选项回显
                this.dataSource.map((ele) => {
                  let isChecked = -1

                  if (this.idkeyAno) {
                    isChecked = this.selectedGoods.findIndex((item) => ele.id == item[this.key] && ele[this.idkeyAno] == item[this.idkeyAno]);
                  } else {
                    isChecked = this.selectedGoods.findIndex((item) => ele.id == item[this.key]);
                  }

                  if (isChecked != -1) {
                    this.checkboxList.push(ele);

                    if (this.columns.usedBy == 'shelfTaskForm') {// 上架任务 上架数量相关
                      if (this.selectedGoods[isChecked]['shelvedNum']) {
                        ele['shelvedNum'] = this.selectedGoods[isChecked]['shelvedNum'];
                      }
                    }
                    if (this.columns.usedBy == 'warehouseWarrantForm') {// 新建入库单 入库数量相关
                      if (this.selectedGoods[isChecked]['goodsNum']) {
                        ele['goodsNum'] = this.selectedGoods[isChecked]['goodsNum'];
                      }
                    }

                    this.$forceUpdate();
                  }
                });
              }
              this.$emit("listData", this.dataSource);
              this.loading = false;
            } else {
              this.$toast(res.message);
              this.loading = false;
              this.finished = true;
            }
          })
          .catch((e) => {
            this.loading = false;
            this.finished = true;
          })
          .finally(() => {
            this.loading = false;
          });
    },
    // 刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.checkboxList = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad(1);
    },
    // 搜索
    searchQuery(v, selectedGoods, idkey, idkeyAno) {
      this.queryParam = v;
      this.key = "serialId";
      if (idkey) {
        this.key = idkey;
      }
      if (idkeyAno) {
        this.idkeyAno = idkeyAno;
      }

      if (selectedGoods && selectedGoods.length != 0) {
        if (selectedGoods[0][this.key]) {
          this.selectedGoods = selectedGoods;
        } else {
          this.selectedGoods = [];
        }
      }

      this.onRefresh();
    },
    // 重置
    searchReset() {
      this.queryParam = {};
      this.onRefresh();
    },
    // 数量处理
    needInNumChange(e, item) {
      let value = this.clearNoNum(e);
      return value;
    },
    /*数量处理*/
    clearNoNum(value) {
      //先把非数字的都替换掉，除了数字和.
      value = value.replace(/[^\d.]/g, "");
      //保证只有出现一个.而没有多个.
      value = value.replace(/\.{2,}/g, ".");
      //必须保证第一个为数字而不是.
      value = value.replace(/^\./g, "");
      //保证.只出现一次，而不能出现两次以上
      value = value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
      //只能输入四个小数
      value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3");
      // console.log(value.includes('.'),'wwwwww')
      //小数位处理
      if (value.substring(0, 1) == "0" && value.substring(0, 2) != "0.") {
        value = "0";
      }
      //输入长度控制
      if (value > 99999999999999.9999) {
        value = "";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  .wrap {
    // min-height: 0.5rem;
    background: #fff;
    margin-top: 20px;
    padding: 32px;
    width: 100vw;

    .top {
      display: flex;
      justify-content: flex-start;

      .icon {
        width: 6px;
        height: 32px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }

      .title {
        width: 602px;
        margin-right: 20px;
        // height: 0.16rem;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;
        // line-height: 0.23rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .titleWidth {
        width: 572px;
        //margin-left: 24px;
      }

      .spot img {
        width: 40px;
        height: 40px;
      }
    }

    .center {
      p {
        margin: 16px 25px 16px 0;
        font-size: 28px;
        display: flex;
        position: relative;

        .key {
          color: #888888;
        }

        .value {
          color: #191f25;
          width: 380px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .arrow {
          color: #1890ff;
          position: absolute;
          right: -10px;
        }

        .numKey {
          line-height: 52px;
          color: #191f25;
        }

        .numValue {
          display: flex;

          .numInput {
            padding: 0 16px;
          }

          .numUnit {
            line-height: 52px;
          }
        }
      }

      .showAll {
        //background: #f5f8ff;
        width: 100vw;
        margin-left: -30px;
        padding: 30px;
        margin-bottom: 30px;
      }

      .showAll2 {
        width: 100%;
        margin: 0 0 30px 0;
        padding: 0 0;
      }
    }

    .label {
      margin-left: -6px;
      margin-top: -20px;

      span {
        height: 32px;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 20px;
        padding: 6px 16px;
        font-size: 22px;
        border-radius: 6px;
      }

      .successs {
        background: #e8f9f0;
        color: #19be6b;
      }
    }

    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 28px;

      .pictures {
        width: 66px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 12px;
        font-size: 24px;
        margin-right: 20px;
      }

      .text {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .opera {
        color: #1890ff;
        font-size: 28px;
      }
    }
  }
}

// 全选样式
.operation {
  width: 100%;
  height: 100px;
  line-height: 100px;
  position: fixed;
  bottom: 0;
  background: #ffff;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  font-size: 28px;
  font-weight: 500;
  color: #191f25;

  .img1 {
    width: 40px;
    height: 40px;
    margin-top: -10px;
  }

  .img2 {
    width: 44px;
    height: 44px;
    margin-top: -10px;
  }

  .imgSpan {
    margin-left: 10px;
  }

  .selectedSpan {
    font-size: 24px;
    color: #1890ff;
  }

  .info {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }

  .singel-info {
    width: 65%;
    height: 78px;
    line-height: 78px;
    text-align: center;
    color: #fff;
    background: #1890ff;
    border-radius: 4px;
    font-size: 32px;
    margin-top: 12px;
  }

  .btncancel {
    width: 200px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 0rem;
    font-size: 32px;
    margin-top: 12px;
  }
}

// 底部操作弹窗样式
.actionWrap {
  display: flex;
  justify-content: flex-start;
  padding: 30px;

  .left {
    // background: #000;
    width: 40px;
    height: 40px;
    margin-right: 20px;

    img {
      width: 40px;
      height: 40px;
    }
  }

  .right {
    flex: 1;

    p {
      margin: 0;
    }

    .handle {
      color: #191f25;
      font-size: 32px;
    }

    .explain {
      color: #888888;
      font-size: 28px;
    }
  }
}

.formItemFlex {
  display: flex;
  flex-direction: row;
  height: 0.56rem;
  margin-top: 10px;

  .FormTit {
    flex: 1;
    min-width: 2.6rem;
  }

  .haveUnitBox {
    display: flex;
    flex: 1;

    .van-cell {
      width: 3.8rem;
      padding: 0;
    }
  }
}

/deep/ .van-checkbox__icon--square {
  top: -2.0rem !important;
}
</style>
